<template>
  <div class="container">
    <!-- 图片列表区域 -->
    <div class="list-wrap" v-if="!isPreview">
      <!-- 2张图 -->
      <ul class="list2" v-if="type == 1">
        <li class="item" v-for="(item, index) in list" :key="index">
          <el-image @click="previewFn(index)" fit="contain" :src="item.url" lazy></el-image>
        </li>
      </ul>
      <!-- 3-4张图 -->
      <ul class="list4" v-if="type == 2">
        <li class="item" v-for="(item, index) in list" :key="index">
          <el-image @click="previewFn(index)" fit="contain" :src="item.url" lazy></el-image>
        </li>
      </ul>
    </div>
    <!-- 图片预览区域 -->
    <div class="img-preview" v-if="isPreview">
      <div class="preview-wrap">
        <el-image @mouseup="mouseupFn" @mousedown="mousedownFn" @mousemove="mousemoveFn" :style="{
            transform: `scale(${scale}) rotate(${rotate}deg)`,
            marginTop: top + 'px',
            marginLeft: left + 'px',
          }" fit="contain" :src="previewUrl" lazy></el-image>
      </div>
      <div class="preview-fun">
        <div class="btns">
          <div class="fun-btn mr17" v-if="type != 0" @click="isPreview = false">
            <img src="../../assets/img/preview/back_icon.png" alt="" />
            <span>返回</span>
          </div>
          <div class="fun-btn mr17" @click="windowMin">
            <img src="../../assets/img/preview/min_icon.png" alt="" />
            <span>最小化</span>
          </div>
          <div class="fun-btn" @click="windowClose">
            <img src="../../assets/img/preview/close_icon.png" alt="" />
            <span>关闭</span>
          </div>
        </div>
        <div class="btns">
          <div class="fun-btn mr17" @click="enlargeFn(true)">
            <img src="../../assets/img/preview/enlarge_icon.png" alt="" />
            <span>放大</span>
          </div>
          <div class="fun-btn mr17" @click="enlargeFn(false)">
            <img src="../../assets/img/preview/narrow_icon.png" alt="" />
            <span>缩小</span>
          </div>
          <div class="fun-btn mr17" @click="rotateFn">
            <img src="../../assets/img/preview/rotate_icon.png" alt="" />
            <span>旋转</span>
          </div>
          <div class="fun-btn" @click="exportFn()">
            <img src="../../assets/img/preview/export1_icon.png" alt="" />
            <span>导出</span>
          </div>
        </div>
        <div class="btns1">
          <img @click="prevFn" src="../../assets/img/preview/prev_icon.png" alt="" />
          <div class="paging-text">{{ pIndex + 1 }}/{{ list.length }}</div>
          <img @click="nextFn" src="../../assets/img/preview/next_icon.png" alt="" />
        </div>
      </div>
    </div>
    <div class="footer" v-if="!isPreview">
      <div class="fun-btn mr17" @click="windowMin">
        <img src="../../assets/img/preview/min_icon.png" alt="" />
        <span>最小化</span>
      </div>
      <div class="fun-btn" @click="windowClose">
        <img src="../../assets/img/preview/close_icon.png" alt="" />
        <span>关闭</span>
      </div>
    </div>
  </div>
</template>
<script>
import mixin from "../../mixin/mixin";
const axios = require("axios");
export default {
  mixins: [mixin],
  name: "Preview",
  data() {
    return {
      isPreview: false,
      info: {},
      type: 0,
      scale: 1,
      rotate: 0,
      list: [],
      pIndex: 0,
      x: 0,
      y: 0,
      left: 0,
      top: 0,
    };
  },
  computed: {
    /**
     * 预览图片URL
     */
    previewUrl () {
      return this.list[this.pIndex].url;
    },
  },
  mounted() {
    this.info = JSON.parse(localStorage.preview_params);
    this.type = this.info.type;
    this.list = this.info.list;
    if (this.type == 0) {
      this.isPreview = true;
      this.pIndex = this.info.index;
      this.reloadImage();
    }
  },
  methods: {
    /**
     * 初始化数值
     */
    init () {
      this.scale = 1;
      this.rotate = 0;
      this.x = 0;
      this.y = 0;
      this.left = 0;
      this.top = 0;
    },
    /**
     * 图片预加载
     */
    reloadImage () {
      this.list.map((item, index) => {
        let img = new Image();
        img.src = item.url;
        img.onload = function () {
          console.log("图片加载完成!", index);
        };
      });
    },
    /**
     * 最小化
     */
    windowMin () {
      this.$electron.ipcRenderer.send("resource-window-minimize", {
        metaId: "Preview",
      });
    },
    /**
     * 关闭
     */
    windowClose () {
      this.$electron.ipcRenderer.send("close-resource-window", {
        metaId: "Preview",
      });
    },
    /**
     * 图片放大
     */
    enlargeFn (val) {
      if (val) {
        this.scale = this.scale + 0.2;
      } else {
        this.scale = this.scale - 0.2;
      }
    },
    /**
     * 图片旋转
     */
    rotateFn () {
      this.rotate == 360 ? 0 : this.rotate;
      this.rotate = this.rotate + 90;
    },
    /**
     * 上一张
     */
    prevFn () {
      this.init();
      if (this.pIndex != 0) {
        this.pIndex--;
      }
    },
    /**
     * 下一张
     */
    nextFn () {
      this.init();
      if (this.pIndex != this.list.length - 1) {
        this.pIndex++;
      }
    },
    /**
     * 鼠标按下
     */
    mousedownFn (e) {
      this.x = e.clientX - this.left;
      this.y = e.clientY - this.top;
    },
    /**
     * 鼠标移动
     */
    mousemoveFn (e) {
      if (this.x) {
        let x = e.clientX;
        let y = e.clientY;
        this.left = x - this.x;
        this.top = y - this.y;
      }
    },
    /**
     * 鼠标松开
     */
    mouseupFn (e) {
      this.x = 0;
      this.y = 0;
    },
    /**
     * 点击图片-预览功能
     */
    previewFn (index) {
      this.isPreview = true;
      this.pIndex = index;
    },
    /**
     * 导出图片
     */
    exportFn () {
      this.getFile(this.list[this.pIndex].url).then((res) => {
        let link = document.createElement("a");
        let blob = new Blob([res]); //后台返回的base64流
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        link.download = "美丽科学手机传图" + Date.now() + ".jpeg";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    },
    /**
     * 图片链接转base64
     * @param url
     * @returns {Promise<any>}
     */
    getFile (url) {
      return new Promise((resolve, reject) => {
        axios({
          method: "get",
          url: url,
          responseType: "blob",
        })
          .then((data) => {
            resolve(data.data);
          })
          .catch((error) => {
            reject(error.toString());
          });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  background-color: #000000 !important;
  color: #fff;
  font-size: 0;
  background: none;
  .list-wrap {
    width: 100%;
    height: calc(100% - 70px);
    .list2 {
      list-style-type: none;
      display: flex;
      height: 100%;
      .item {
        width: 50%;
        height: 100%;
        padding: 40px;
        box-sizing: border-box;
        /deep/ .el-image {
          width: 100%;
          height: 100%;
          cursor: pointer;
        }
      }
    }
    .list4 {
      list-style-type: none;
      display: flex;
      flex-wrap: wrap;
      height: 100%;
      .item {
        width: 50%;
        height: 50%;
        padding: 40px;
        box-sizing: border-box;
        /deep/ .el-image {
          width: 100%;
          height: 100%;
          cursor: pointer;
        }
      }
    }
  }
  .img-preview {
    position: relative;
    width: 100%;
    height: 100%;
    .preview-wrap {
      height: calc(100% - 100px);
      padding: 50px;
      box-sizing: border-box;
      overflow: hidden;
      /deep/ .el-image {
        width: 100%;
        height: 100%;
        transition: transform 0.3s ease 0s;
        background-color: transparent;
      }
    }
    .preview-fun {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100px;
      z-index: 10;
      padding: 0 50px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .btns {
        padding: 0 20px;
        box-sizing: border-box;
        height: 48px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 24px;
        display: flex;
        z-index: 10;
        .fun-btn {
          display: flex;
          align-items: center;
          cursor: pointer;
          &.mr17 {
            margin-right: 17px;
          }
          img {
            width: 24px;
            height: 24px;
            margin-right: 5px;
          }
          span {
            font-size: 14px;
            color: #fff;
          }
        }
      }
      .btns1 {
        padding: 0 10px;
        box-sizing: border-box;
        height: 48px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 24px;
        display: flex;
        align-items: center;
        z-index: 10;
        img {
          width: 24px;
          height: 24px;
          margin: 0 10px;
          cursor: pointer;
        }
        .paging-text {
          font-size: 14px;
          color: #fff;
        }
      }
    }
  }
  .footer {
    padding: 0 20px;
    box-sizing: border-box;
    height: 48px;
    position: fixed;
    bottom: 22px;
    left: 50px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    display: flex;
    z-index: 10;
    .fun-btn {
      display: flex;
      align-items: center;
      cursor: pointer;
      &.mr17 {
        margin-right: 17px;
      }
      img {
        width: 24px;
        height: 24px;
        margin-right: 5px;
      }
      span {
        font-size: 14px;
        color: #fff;
      }
    }
  }
}
</style>